<script setup lang="ts">

import {nextTick, onMounted, reactive, ref} from 'vue';
import {zhCn} from 'element-plus/es/locale/index.mjs';
import type {GetType} from "@/type/GetType";
import {getAllUsers, post} from "@/net";
import {ElMessage} from 'element-plus';
import router from "@/router";

const dataPicker = ref(new Date());

// 获得用户名
interface USER {
  username: string;
  uid: number;
}

const handlerNameSelectChange = (um: string) => {
  const index = USERS.findIndex(user => user.username === um);
  if (um in USERS) {
    addForm.uid = USERS[index].uid;
    addForm.name = USERS[index].username;
  }
}
const USERS = reactive<USER[]>([])
const getAllUser_name = async () => {
  try {
    const res: GetType = await getAllUsers('/api/user/getAllName');
    USERS.splice(0, USERS.length, ...res.message.filter((user: any) => user.name !== null));
  } catch (e) {
    console.log(e)
  }
};
// 获得房屋id ,address
const handlerAddressSelectChange = () => {
  const index = HOUSES.findIndex(house => house.address === addForm.address);
  if (addForm.address in HOUSES) {
    addForm.house_id = HOUSES[index].house_id;
    addForm.address = HOUSES[index].address;
  }
}

interface HOUSE {
  house_id: number;
  address: string;
}

const HOUSES = reactive<HOUSE[]>([])
const getAllHouse_id = async () => {
  try {
    const res: GetType = await getAllUsers('/api/house/getAllHouseIDAndAddress');
    HOUSES.splice(0, HOUSES.length, ...res.message.filter((house: any) => house.address !== null));
  } catch (e) {
    console.log(e)
  }
};


//

let addForm = reactive({
  id: 0,
  issue: '',
  type: '',
  progress: '',
  priority: '',
  house_id: 0,
  address: '',
  uid: 0,
  name: '',
  time: '',
  remark: ''
})

const submitAdd = () => {
  addForm.time = dataPicker.value.toLocaleDateString();
  post('api/repairstatus/add', addForm,
      () => {
        ElMessage.success("添加成功");
        nextTick(() => {
          addForm.id = 0;
          addForm.issue = '';
          addForm.type = '';
          addForm.progress = '';
          addForm.priority = '';
          addForm.house_id = 0;
          addForm.address = '';
          addForm.uid = 0;
          addForm.name = '';
          addForm.time = '';
          addForm.remark = '';
        })
        router.go(0);
        getAllHouse_id();
        getAllUser_name();
      },
      () => {
        ElMessage.error("添加失败");
      },)
}
// 枚举量

const ProgressOptions = [
  {
    label: '待处理',
    value: '待处理'
  },
  {
    label: '处理中',
    value: '处理中'
  },
  {
    label: '已完成',
    value: '已完成'
  },
  {
    label: '已取消',
    value: '已取消'
  }
]


const priorityOptions = [
  {
    label: '高',
    value: '高'
  },
  {
    label: '中',
    value: '中'
  },
  {
    label: '低',
    value: '低'
  }
]

onMounted(() => {
  getAllUser_name();
  getAllHouse_id();
})
</script>

<template style="display: flex">

  <div style="display: flex; flex-flow: row nowrap; justify-content: space-between; margin-bottom: 10px">
    <div>
      <span>维修管理 > 维修登记</span>
    </div>
    <div style="margin-right: 60px">
      <el-button type="primary" @click="router.push('/home/repairInfo')">查看记录</el-button>
    </div>
  </div>
  <el-divider />
  <div style="display: flex;align-items: center;margin-top: 20px">

      <el-form label-width="auto"
               label-position="left"
               label-suffix=":"
               style="width: 500px;  margin:0 auto;"
               :size="'large'"
               v-model="addForm"
               ref="formRef"
      >
        <el-form-item :required="true" label="维修问题">
          <el-input id="re_question" v-model="addForm.issue"/>
        </el-form-item>
        <el-form-item  :required="true" label="维修类型">
          <el-input id="re_type" v-model="addForm.type"/>
        </el-form-item>
        <el-form-item :required="true" label="维修进度">
          <el-select v-model="addForm.progress"
                     placeholder="请选择"
                     prop="progress"

          >
            <el-option id="re_progress"
                v-for="progress in ProgressOptions"
                :key="progress.value"
                :label="progress.label"
                :value="progress.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :required="true" label="维修优先级">
          <el-select v-model="addForm.priority"
                     placeholder="请选择"
                     prop="priority"

          >
            <el-option id="re_priority"
                v-for="priority in priorityOptions"
                :key="priority.value"
                :label="priority.label"
                :value="priority.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :required="true" label="用户名">
          <el-select  v-model="addForm.name"
                     placeholder="请选择"
                     prop="name"
                     @change="handlerNameSelectChange"
          >
            <el-option id="re_name"
                v-for="user in USERS"
                :key="user.uid"
                :label="user.username"
                :value="user.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item :required="true" label="房屋地址">
          <el-select  v-model="addForm.address"
                     placeholder="请选择"
                     prop="username"
                     @change="handlerAddressSelectChange"
          >
            <el-option id="re_address"
                v-for="user in HOUSES"
                :key="user.house_id"
                :label="user.address"
                :value="user.address"
            />
          </el-select>
        </el-form-item>
        <el-form-item :required="true" label="维修时间">
          <el-config-provider :locale="zhCn">
            <el-date-picker
                v-model="dataPicker"
                :size="'large'"
                type="date"
                placeholder="选择日期"
            />
          </el-config-provider>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.remark"/>
        </el-form-item>
        <el-form-item style="">
          <el-button style="margin: 0 auto;" type="primary" @click="submitAdd" id="re_right_button">提交</el-button>
          <el-button style="margin: 0 auto;"  @click="router.go(0)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<style scoped>

</style>